<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习模式选择 - 健身式Java学习平台</title>
    <style>
        /* ===== 基础样式重置 ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* ===== 导航栏样式 ===== */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 255, 255, 0.95);
            padding: 15px 30px;
            border-radius: 12px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .nav-brand {
            font-size: 24px;
            font-weight: bold;
            color: #764ba2;
            display: flex;
            align-items: center;
        }

        .nav-brand i {
            margin-right: 10px;
            font-size: 26px;
        }

        .nav-buttons {
            display: flex;
            gap: 15px;
        }

        /* ===== 按钮样式 ===== */
        .btn {
            padding: 10px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            cursor: pointer;
        }

        .btn-outline {
            border: 2px solid #764ba2;
            color: #764ba2;
            background: transparent;
        }

        .btn-primary {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
        }

        .btn-success {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
        }

        .btn-warning {
            background: linear-gradient(135deg, #ffc107, #fd7e14);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
        }

        .btn-danger {
            background: linear-gradient(135deg, #dc3545, #e83e8c);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
        }

        .btn-purple {
            background: linear-gradient(135deg, #6f42c1, #8e24aa);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
        }

        .btn-cyan {
            background: linear-gradient(135deg, #17a2b8, #20c997);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
        }

        .btn-outline:hover {
            background: #764ba2;
            color: white;
        }

        /* ===== 主要内容区域 ===== */
        .main-content {
            background: white;
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            margin-bottom: 30px;
        }

        .welcome-section {
            text-align: center;
            margin-bottom: 40px;
        }

        .welcome-title {
            font-size: 36px;
            color: #333;
            margin-bottom: 15px;
        }

        .welcome-subtitle {
            font-size: 18px;
            color: #666;
            max-width: 600px;
            margin: 0 auto 30px;
            line-height: 1.6;
        }

        /* ===== 当前知识点信息 ===== */
        .current-point-info {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .point-details h2 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .point-meta {
            display: flex;
            gap: 20px;
            font-size: 14px;
            opacity: 0.9;
        }

        /* ===== 练习模式网格布局 ===== */
        .practice-modes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 40px;
        }

        /* ===== 卡片基础样式 ===== */
        .mode-card {
            background: white;
            border-radius: 16px;
            padding: 30px 25px;
            text-align: center;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 3px solid transparent;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transform-origin: center;
            will-change: transform, box-shadow;
            backface-visibility: hidden;
        }

        /* 卡片顶部彩色条 */
        .mode-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--mode-color), rgba(var(--mode-color-rgb), 0.7));
            z-index: 2;
        }

        /* ===== 卡片悬停效果 ===== */
        .mode-card:hover {
            transform: translateY(-15px) scale(1.08);
            box-shadow:
                    0 25px 50px rgba(0, 0, 0, 0.25),
                    0 0 0 4px var(--mode-color),
                    0 0 30px rgba(var(--mode-color-rgb), 0.5);
            border-color: var(--mode-color);
            background: linear-gradient(135deg,
            rgba(var(--mode-color-rgb), 0.05) 0%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(var(--mode-color-rgb), 0.08) 100%);
            z-index: 10;
        }

        /* 悬停时的光晕效果 */
        .mode-card::after {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background: radial-gradient(circle at center,
            rgba(var(--mode-color-rgb), 0.1) 0%,
            transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: -1;
            border-radius: 20px;
        }

        .mode-card:hover::after {
            opacity: 1;
        }

        /* ===== 卡片颜色定义 ===== */
        /* 标准练习模式 */
        .mode-card.gateway {
            --mode-color: #007bff;
            --mode-color-rgb: 0, 123, 255;
        }
        .mode-card.repeat {
            --mode-color: #28a745;
            --mode-color-rgb: 40, 167, 69;
        }
        .mode-card.free {
            --mode-color: #ffc107;
            --mode-color-rgb: 255, 193, 7;
        }
        .mode-card.challenge {
            --mode-color: #dc3545;
            --mode-color-rgb: 220, 53, 69;
        }

        /* 竞技模式 */
        .mode-card.arena {
            --mode-color: #6f42c1;
            --mode-color-rgb: 111, 66, 193;
        }
        .mode-card.league {
            --mode-color: #17a2b8;
            --mode-color-rgb: 23, 162, 184;
        }
        .mode-card.puzzle {
            --mode-color: #fd7e14;
            --mode-color-rgb: 253, 126, 20;
        }
        .mode-card.adventure {
            --mode-color: #20c997;
            --mode-color-rgb: 32, 201, 151;
        }

        /* 娱乐模式 */
        .mode-card.battle-royale {
            --mode-color: #dc3545;
            --mode-color-rgb: 220, 53, 69;
        }
        .mode-card.search-fight {
            --mode-color: #6610f2;
            --mode-color-rgb: 102, 16, 242;
        }
        .mode-card.soul-fight {
            --mode-color: #e83e8c;
            --mode-color-rgb: 232, 62, 140;
        }

        /* ===== 卡片内部元素样式 ===== */
        /* 图标样式与动画 */
        .mode-icon {
            font-size: 52px;
            margin-bottom: 20px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            filter: grayscale(0.3);
        }

        .mode-card:hover .mode-icon {
            transform: scale(1.4) rotate(12deg);
            filter:
                    drop-shadow(0 10px 20px rgba(var(--mode-color-rgb), 0.4))
                    grayscale(0);
            color: var(--mode-color);
        }

        /* 标题样式与动画 */
        .mode-card h3 {
            margin-bottom: 15px;
            color: #333;
            font-size: 24px;
            font-weight: 700;
            transition: all 0.4s ease;
            position: relative;
        }

        .mode-card:hover h3 {
            color: var(--mode-color);
            transform: translateX(10px) scale(1.05);
            text-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }

        /* 描述文字样式 */
        .mode-description {
            color: #666;
            line-height: 1.6;
            margin-bottom: 20px;
            min-height: 80px;
            transition: all 0.4s ease;
        }

        .mode-card:hover .mode-description {
            color: #444;
            transform: translateY(-5px);
        }

        /* 特征列表样式 */
        .mode-features {
            text-align: left;
            margin-bottom: 25px;
            padding: 18px;
            background: #f8f9fa;
            border-radius: 10px;
            transition: all 0.4s ease;
            border-left: 4px solid transparent;
        }

        .mode-card:hover .mode-features {
            background: rgba(var(--mode-color-rgb), 0.05);
            border-left-color: var(--mode-color);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .mode-features ul {
            list-style: none;
            padding: 0;
        }

        .mode-features li {
            padding: 6px 0;
            color: #555;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
        }

        .mode-card:hover .mode-features li {
            color: #333;
            transform: translateX(3px);
        }

        .mode-features li::before {
            content: '✓';
            color: var(--mode-color);
            font-weight: bold;
            margin-right: 10px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .mode-card:hover .mode-features li::before {
            transform: scale(1.2);
            text-shadow: 0 0 8px rgba(var(--mode-color-rgb), 0.5);
        }

        /* 难度标签样式 */
        .mode-difficulty {
            display: inline-block;
            padding: 6px 16px;
            background: var(--mode-color);
            color: white;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 15px;
            transition: all 0.4s ease;
            box-shadow: 0 3px 10px rgba(var(--mode-color-rgb), 0.3);
        }

        .mode-card:hover .mode-difficulty {
            transform: scale(1.1) translateY(-3px);
            box-shadow: 0 5px 15px rgba(var(--mode-color-rgb), 0.5);
        }

        /* 按钮强调效果 */
        .mode-card:hover .btn {
            transform: scale(1.1) translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            font-weight: 700;
        }

        /* ===== 模式分类标题 ===== */
        .mode-category {
            margin-top: 50px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e9ecef;
            color: #333;
            font-size: 28px;
        }

        /* ===== 响应式设计 ===== */
        @media (max-width: 768px) {
            .nav-buttons {
                flex-direction: column;
                width: 100%;
                gap: 10px;
            }

            .navbar {
                flex-direction: column;
                gap: 15px;
            }

            .practice-modes-grid {
                grid-template-columns: 1fr;
            }

            .point-meta {
                flex-direction: column;
                gap: 10px;
            }

            /* 移动端减弱悬停效果 */
            .mode-card:hover {
                transform: translateY(-8px) scale(1.05);
            }

            .mode-card:hover .mode-icon {
                transform: scale(1.2) rotate(8deg);
            }
        }

        @media (max-width: 480px) {
            .main-content {
                padding: 20px 15px;
            }

            .mode-card {
                padding: 20px 15px;
            }

            .mode-icon {
                font-size: 36px;
                height: 60px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-brand">
            <i>🚀</i> 渐进学习平台
        </div>
        <div class="nav-buttons">
            <a th:href="@{/knowledge/gym}" class="btn btn-outline">返回训练馆</a>
            <a th:href="@{/}" class="btn btn-outline">返回首页</a>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <div class="welcome-section">
            <h1 class="welcome-title">选择练习模式</h1>
            <p class="welcome-subtitle">通过不同形式的练习巩固知识，选择最适合你的训练方式</p>
        </div>

        <!-- 当前知识点信息 -->
        <div class="current-point-info">
            <div class="point-details">
                <h2 th:text="${point.title}">当前知识点标题</h2>
                <div class="point-meta">
                    <span>难度: <strong th:text="${point.difficultyLevel}">初级</strong></span>
                    <!-- 正确代码 - 与KnowledgePoint实体类匹配 -->
                    <span>预计练习时间: <strong th:text="${point.baseDuration}">15分钟</strong></span>
                    <span>经验值: <strong th:text="${point.baseExperience}">100</strong></span>
                </div>
            </div>
        </div>

        <!-- 标准练习模式 -->
        <h2 class="mode-category">标准练习模式</h2>
        <div class="practice-modes-grid">
            <!-- 闯关测验模式 -->
            <div class="mode-card gateway">
                <div class="mode-icon">🚀</div>
                <div class="mode-difficulty">必修</div>
                <h3>闯关测验</h3>
                <p class="mode-description">必须通过才能解锁下一个知识点，包含多种题型综合检验掌握程度</p>

                <div class="mode-features">
                    <ul>
                        <li>多种题型混合</li>
                        <li>必须达到及格线</li>
                        <li>解锁后续内容</li>
                        <li>计入学习进度</li>
                    </ul>
                </div>

                <a th:href="@{/practice/gateway/prepare(pointId=${point.id})}" class="btn btn-primary">开始闯关</a>
            </div>

            <!-- 重复模式 -->
            <div class="mode-card repeat">
                <div class="mode-icon">🔁</div>
                <div class="mode-difficulty">强化</div>
                <h3>重复模式</h3>
                <p class="mode-description">针对错题和难点进行强化训练，帮助你克服薄弱环节</p>

                <div class="mode-features">
                    <ul>
                        <li>错题重点练习</li>
                        <li>智能重复算法</li>
                        <li>渐进难度提升</li>
                        <li>巩固记忆</li>
                    </ul>
                </div>

                <a th:href="@{/practice/repeat(pointId=${point.id})}" class="btn btn-success">强化训练</a>
            </div>

            <!-- 自由模式 -->
            <div class="mode-card free">
                <div class="mode-icon">🎯</div>
                <div class="mode-difficulty">自主</div>
                <h3>自由模式</h3>
                <p class="mode-description">自主选择薄弱环节进行针对性练习，灵活安排学习内容</p>

                <div class="mode-features">
                    <ul>
                        <li>自主选题练习</li>
                        <li>按需定制内容</li>
                        <li>无时间压力</li>
                        <li>详细解析</li>
                    </ul>
                </div>

                <a th:href="@{/practice/free(pointId=${point.id})}" class="btn btn-warning">自由练习</a>
            </div>

            <!-- 挑战模式 -->
            <div class="mode-card challenge">
                <div class="mode-icon">⚡</div>
                <div class="mode-difficulty">挑战</div>
                <h3>挑战模式</h3>
                <p class="mode-description">限时挑战提升准确性和反应速度，适合想要突破的学习者</p>

                <div class="mode-features">
                    <ul>
                        <li>限时答题</li>
                        <li>连击奖励</li>
                        <li>速度训练</li>
                        <li>排行榜竞争</li>
                    </ul>
                </div>

                <a th:href="@{/practice/challenge(pointId=${point.id})}" class="btn btn-danger">接受挑战</a>
            </div>
        </div>

        <!-- 竞技模式 -->
        <h2 class="mode-category">竞技模式</h2>
        <div class="practice-modes-grid">
            <!-- 知识竞技场 -->
            <div class="mode-card arena">
                <div class="mode-icon">🏆</div>
                <div class="mode-difficulty">竞技</div>
                <h3>知识竞技场</h3>
                <p class="mode-description">实时PvP/PvE对战，与其他学习者一较高下</p>

                <div class="mode-features">
                    <ul>
                        <li>实时对战</li>
                        <li>PvP/PvE模式</li>
                        <li>段位系统</li>
                        <li>奖励丰厚</li>
                    </ul>
                </div>

                <a th:href="@{/practice/arena(pointId=${point.id})}" class="btn btn-purple">进入竞技场</a>
            </div>

            <!-- 巅峰联赛 -->
            <div class="mode-card league">
                <div class="mode-icon">📈</div>
                <div class="mode-difficulty">联赛</div>
                <h3>巅峰联赛</h3>
                <p class="mode-description">周度排名赛 20-30人，竞争升降级制度</p>

                <div class="mode-features">
                    <ul>
                        <li>周度排名赛</li>
                        <li>20-30人规模</li>
                        <li>升降级制度</li>
                        <li>专属奖励</li>
                    </ul>
                </div>

                <a th:href="@{/practice/league(pointId=${point.id})}" class="btn btn-cyan">参加联赛</a>
            </div>

            <!-- 代码解谜 -->
            <div class="mode-card puzzle">
                <div class="mode-icon">🧩</div>
                <div class="mode-difficulty">解谜</div>
                <h3>代码解谜</h3>
                <p class="mode-description">脑洞大开的编程谜题，如同编程趣味性竞技</p>

                <div class="mode-features">
                    <ul>
                        <li>创意编程谜题</li>
                        <li>逻辑思维挑战</li>
                        <li>趣味性竞技</li>
                        <li>解谜排行榜</li>
                    </ul>
                </div>

                <a th:href="@{/practice/puzzle(pointId=${point.id})}" class="btn btn-warning">开始解谜</a>
            </div>

            <!-- 故事冒险 -->
            <div class="mode-card adventure">
                <div class="mode-icon">🎮</div>
                <div class="mode-difficulty">冒险</div>
                <h3>故事冒险</h3>
                <p class="mode-description">在剧情中应用知识，沉浸式学习体验</p>

                <div class="mode-features">
                    <ul>
                        <li>沉浸式剧情</li>
                        <li>知识应用场景</li>
                        <li>角色成长系统</li>
                        <li>剧情分支选择</li>
                    </ul>
                </div>

                <a th:href="@{/practice/adventure(pointId=${point.id})}" class="btn btn-success">开始冒险</a>
            </div>
        </div>

        <!-- 娱乐模式 -->
        <h2 class="mode-category">娱乐模式</h2>
        <div class="practice-modes-grid">
            <!-- 大逃杀模式 -->
            <div class="mode-card battle-royale">
                <div class="mode-icon">🍗</div>
                <div class="mode-difficulty">大逃杀</div>
                <h3>知识大逃杀</h3>
                <p class="mode-description">10人同场竞技，答错即淘汰，最后一人获胜</p>

                <div class="mode-features">
                    <ul>
                        <li>10人同场竞技</li>
                        <li>答错即淘汰</li>
                        <li>最后一人获胜</li>
                        <li>紧张刺激</li>
                    </ul>
                </div>

                <a th:href="@{/practice/battle-royale(pointId=${point.id})}" class="btn btn-danger">加入战斗</a>
            </div>

            <!-- 搜打撤模式 -->
            <div class="mode-card search-fight">
                <div class="mode-icon">🔍</div>
                <div class="mode-difficulty">生存</div>
                <h3>搜打撤模式</h3>
                <p class="mode-description">搜集知识点，遇到对手PK，赢了才能撤离</p>

                <div class="mode-features">
                    <ul>
                        <li>搜集知识点</li>
                        <li>遭遇战PK</li>
                        <li>胜利才能撤离</li>
                        <li>生存至上</li>
                    </ul>
                </div>

                <a th:href="@{/practice/search-fight(pointId=${point.id})}" class="btn btn-purple">开始搜索</a>
            </div>

            <!-- 斗魂模式 -->
            <div class="mode-card soul-fight">
                <div class="mode-icon">🔥</div>
                <div class="mode-difficulty">斗魂</div>
                <h3>斗魂竞技场</h3>
                <p class="mode-description">高频反馈竞技，不同用户设计不同知识点，最后只剩一人</p>

                <div class="mode-features">
                    <ul>
                        <li>高频反馈</li>
                        <li>个性化知识点</li>
                        <li>最后一人获胜</li>
                        <li>激烈对抗</li>
                    </ul>
                </div>

                <a th:href="@{/practice/soul-fight(pointId=${point.id})}" class="btn btn-danger">点燃斗魂</a>
            </div>
        </div>

        <!-- 模式说明 -->
        <div style="margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
            <h3 style="margin-bottom: 15px; color: #333;">💡 练习模式说明</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
                <div>
                    <strong>🚀 闯关测验</strong>
                    <p style="color: #666; font-size: 14px; margin-top: 5px;">建议首先完成，通过后解锁下一知识点</p>
                </div>
                <div>
                    <strong>🔁 重复模式</strong>
                    <p style="color: #666; font-size: 14px; margin-top: 5px;">学习后24小时内复习效果最佳</p>
                </div>
                <div>
                    <strong>🎯 自由模式</strong>
                    <p style="color: #666; font-size: 14px; margin-top: 5px;">随时可进行，巩固特定知识点</p>
                </div>
                <div>
                    <strong>⚡ 挑战模式</strong>
                    <p style="color: #666; font-size: 14px; margin-top: 5px;">掌握后使用，提升熟练度和速度</p>
                </div>
                <div>
                    <strong>🏆 竞技模式</strong>
                    <p style="color: #666; font-size: 14px; margin-top: 5px;">与其他学习者竞争，提升学习动力</p>
                </div>
                <div>
                    <strong>🎮 娱乐模式</strong>
                    <p style="color: #666; font-size: 14px; margin-top: 5px;">游戏化学习体验，增加学习趣味性</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 音频元素 - 用于播放音效 -->
<!-- 修正后的音频元素 -->
<audio id="hover-sound" preload="auto" style="display: none;">
    <source th:src="@{/sounds/hover.mp3}" type="audio/mpeg">
    您的浏览器不支持音频元素。
</audio>
<audio id="click-sound" preload="auto" style="display: none;">
    <source th:src="@{/sounds/click.mp3}" type="audio/mpeg">
    您的浏览器不支持音频元素。
</audio>

<script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        let audioInitialized = false;

        // 初始化音频函数
        function initializeAudio() {
            if (audioInitialized) return;

            // 获取音效元素
            const hoverSound = document.getElementById('hover-sound');
            const clickSound = document.getElementById('click-sound');

            // 预加载音频（解决自动播放限制）
            hoverSound.volume = 0.4; // 设置音量
            clickSound.volume = 0.1;

            // 尝试播放静音音频来解锁音频上下文
            hoverSound.play().then(() => {
                hoverSound.pause();
                hoverSound.currentTime = 0;
                audioInitialized = true;
                console.log('音频初始化成功');
            }).catch(e => {
                console.log('音频初始化需要用户交互');
            });

            // 获取所有模式卡片和按钮
            const modeCards = document.querySelectorAll('.mode-card');
            const buttons = document.querySelectorAll('.btn');

            // 为每个卡片添加鼠标悬停事件
            modeCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    if (!audioInitialized) {
                        initializeAudio();
                        return;
                    }
                    hoverSound.currentTime = 0;
                    hoverSound.play().catch(e => console.log('悬停音效播放失败:', e));
                });

                card.addEventListener('click', function() {
                    if (!audioInitialized) {
                        initializeAudio();
                        return;
                    }
                    clickSound.currentTime = 0;
                    clickSound.play().catch(e => console.log('点击音效播放失败:', e));
                });
            });

            // 为所有按钮添加点击音效
            buttons.forEach(button => {
                button.addEventListener('click', function(e) {
                    if (!audioInitialized) {
                        initializeAudio();
                        // 继续执行默认的点击行为
                        return;
                    }
                    clickSound.currentTime = 0;
                    clickSound.play().catch(e => console.log('按钮点击音效播放失败:', e));
                });
            });
        }

        // 页面加载后尝试初始化音频
        initializeAudio();

        // 添加页面点击事件来解锁音频（用户第一次交互）
        document.addEventListener('click', function() {
            if (!audioInitialized) {
                initializeAudio();
            }
        });

        // 添加控制台调试信息
        console.log('音效系统已加载，等待用户交互...');
    });
</script>
</body>
</html>